<template>
  <div class="map-view">
    <div class="map-container" ref="mapRef"></div>

    <div class="sidebar">
      <div class="search-box">
        <input v-model="searchKeyword" placeholder="搜索景点/餐厅/酒店..." @keydown.enter="handleSearch" />
        <button @click="handleSearch">搜索</button>
      </div>

      <div class="poi-list">
        <POICard
          v-for="poi in pois"
          :key="poi.id"
          :poi="poi"
          @select="handleSelect"
          @route="handleRoute"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import POICard from '@/components/POICard.vue'

interface POI {
  id: number
  name: string
  type: string
  lat: number
  lng: number
  city: string
  description: string
}

const router = useRouter()
const mapRef = ref<HTMLDivElement | null>(null)
const map = ref<any>(null)
const pois = ref<POI[]>([])
const searchKeyword = ref<string>('')

const fetchPOIs = async (keyword: string) => {
  const res = await fetch(`http://localhost:3000/pois?name_like=${keyword}`)
  pois.value = await res.json()

  // 清除旧标注
  map.value.clearOverlays()

  // 添加新标注
  pois.value.forEach(poi => {
    const point = new BMapGL.Point(poi.lng, poi.lat)
    const marker = new BMapGL.Marker(point)
    map.value.addOverlay(marker)

    const infoWindow = new BMapGL.InfoWindow(`
      <strong>${poi.name}</strong><br/>
      ${poi.description}<br/>
      类型：${poi.type}
    `)

    marker.addEventListener('click', () => {
      map.value.openInfoWindow(infoWindow, point)
    })
  })
}

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    fetchPOIs(searchKeyword.value.trim())
  }
}

const handleSelect = (poi: POI) => {
  const point = new BMapGL.Point(poi.lng, poi.lat)
  map.value.panTo(point)
  const infoWindow = new BMapGL.InfoWindow(`
    <strong>${poi.name}</strong><br/>
    ${poi.description}<br/>
    类型：${poi.type}
  `)
  map.value.openInfoWindow(infoWindow, point)
}

const handleRoute = (poi: POI) => {
  router.push({
    name: 'RoutePlan',
    query: {
      lat: poi.lat,
      lng: poi.lng,
      name: poi.name
    }
  })
}

onMounted(() => {
  map.value = new BMapGL.Map(mapRef.value)
  const center = new BMapGL.Point(118.08, 24.45) // 鼓浪屿为例
  map.value.centerAndZoom(center, 14)
  map.value.enableScrollWheelZoom(true)

  const geolocation = new BMapGL.Geolocation()
  geolocation.getCurrentPosition((res: any) => {
    if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) {
      map.value.panTo(res.point)
    } else {
      console.warn('定位失败：', geolocation.getStatus())
    }
  })

  fetchPOIs('')
})
</script>

<style scoped>
.map-view {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.map-container {
  flex: 2;
  height: 100%;
}

.sidebar {
  flex: 1;
  max-width: 400px;
  background-color: #f5f7fa;
  padding: 16px;
  overflow-y: auto;
  border-left: 1px solid #ddd;
}

.search-box {
  display: flex;
  margin-bottom: 12px;
}

.search-box input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box button {
  padding: 6px 12px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.poi-list {
  display: flex;
  flex-direction: column;
}
</style>
